<template>
	<view class="wallet">
		<!-- 头部导航 -->
		<view class="w-750  w-bj-white" style="position: fixed; top: 0; left: 0;">
			<view class="h-100 w-row-justify-between-align">
				<view class="wh-80 w-row-center"></view>
				<view class="w-250 h-100 w-row-center w-wz-conts font-36">钱包</view>
				<view class="wh-80 w-row-center"></view>
			</view>
		</view>
		<view class="bwh-100"></view>
		<!-- 头部导航结束 -->
		<view class="bwh-20"></view>
		
		<view class="content-box padding-top-xs">
			<view class="padding-sm padding-bottom-0 bg-white" style="padding-left:10rpx;padding-right: 10rpx;padding-top:0rpx">
<!--				<view class="text-sml">-->
<!--					<view class="van-space van-space&#45;&#45;horizontal van-space&#45;&#45;align-center">-->
<!--						<view class="van-space-item">-->
<!--							<span class="text-bold-lg">账户信息</span>-->
<!--						</view>-->
<!--					</view>-->
<!--				</view>-->
<!--				-->
<!--				<view class="van-divider van-divider&#45;&#45;hairline margin-bottom-0">-->

<!--				</view>-->
				<view class="van-grid">
          <view class="van-grid-item" style="flex-basis: 50%;width: 0;" v-for="(item,index) in infoList1" :key="index">
            <view class="van-grid-item__content van-grid-item__content--center">
              <view class="van-space van-space--horizontal van-space--align-center text-color-grey disflex">
                <view class="van-space-item disflex" style="margin-right: 0.2rem;" >
                  <image class="info-icon" :src="item.icon" mode="widthFix" ></image>
                </view>
                <view class="van-space-item disflex" >
                  <span style="font-size: 22rpx">{{item.title}}</span>
                </view>
              </view>

              <view class="ellipsis" >
                <span v-if="index == 0">￥</span><span class=" text-bold text-color-yellow " style="font-size:30rpx;">{{item.price}}</span>
              </view>
            </view>
          </view>
          <view class="van-grid-item" style="flex-basis: 50%;width: 0;" v-for="(item,index) in infoList" :key="index" v-if="Config.points_open==0">
            <view class="van-grid-item__content van-grid-item__content--center">
              <view class="van-space van-space--horizontal van-space--align-center text-color-grey disflex">
                <view class="van-space-item disflex" style="margin-right: 0.2rem;" >
                  <image class="info-icon" :src="item.icon" mode="widthFix" ></image>
                </view>
                <view class="van-space-item disflex" >
                  <span style="font-size: 22rpx">{{item.title}}</span>
                </view>
              </view>

              <view class="ellipsis" >
                <span v-if="index == 0">￥</span><span class=" text-bold text-color-yellow " style="font-size:30rpx;">{{item.price}}</span>
              </view>
            </view>
          </view>
				</view>
        <view class="van-grid" v-if="Config.points_open==1">
          <view class="van-grid-item" style="flex-basis: 33%;width: 0;" v-for="(item,index) in infoList" :key="index">
            <view class="van-grid-item__content van-grid-item__content--center">
              <view class="van-space van-space--horizontal van-space--align-center text-color-grey disflex">
                <view class="van-space-item disflex" style="margin-right: 0.2rem;">
                  <image class="info-icon" :src="item.icon" mode="widthFix"></image>
                </view>
                <view class="van-space-item disflex" >
                  <span style="font-size: 22rpx">{{item.title}}</span>
                </view>
              </view>

              <view class="ellipsis">
                ￥<span class=" text-bold text-color-yellow " style="font-size:30rpx;">{{item.price}}</span>
              </view>
            </view>
          </view>
        </view>
			</view>
      <image :src="Config.qb_banner" mode="widthFix" style="width: 100%;margin-top: 10px;"></image>
			<view class="van-tabs van-tabs--line margin-top-xs">
				<view class="van-tabs__wrap">
					<liuyuno-tabs
					  :tabData="tabs"
					  :underLineWidth="100"
					  :activeIndex="defaultIndex"
					  @tabClick="tabClick"
					/>
				</view>
			</view>

			<deposit v-if="defaultIndex === 0" />
			<withdraw v-else :price="infoList[0].price" :wallteData="wallteData" :config="Config" :userInfo="userInfo" @submit="getMoney()" />
		</view>
    <!-- 普通弹窗 -->
    <uni-popup ref="noticePopup"   borderRadius="20px 20px 20px 20px">
      <view class="popup-content">
        <view style="text-align: center;font-size: 16px;margin-top: 10px;font-weight: 600;">系统消息</view>
        <view
            class="text" style="margin:10px 0;width: 80vw">{{this.wallteData.reason}}</view>
        <view class="popup-btn">
          <button class="popup-btn" size="mini" @click="submitConfirm()">确定</button>
        </view>
      </view>
    </uni-popup>
	</view>
</template>

<script>
	import infoIcon1 from '@/static/tabBar/qb2.png'
	import infoIcon2 from '@/static/index/deposit-icon.png'
	import infoIcon3 from '@/static/index/dispensers-icon.png'
	import liuyunoTabs from "@/components/liuyuno-tabs/liuyuno-tabs.vue";
	import deposit from './components/deposit.vue'
	import withdraw from './components/withdraw.vue'
	import $H from '@/pages/common/request.js'
	export default {
		components: {
		  liuyunoTabs,
		  deposit,
		  withdraw
		},
		data () {
			return {
        Config:{},
        userInfo:{},
        infoList1:[
          {
            title: '今日流水',
            icon: infoIcon3,
            price: '0.00'
          },
          {
            title: '积分',
            icon: infoIcon3,
            price: '0.00'
          },
        ],
				infoList:[
          {
            title: '总余额',
            icon: infoIcon1,
            price: '0.00'
          },
				{
					title: '现金余额',
					icon: infoIcon2,
					price: '0.00'
				},
          {
            title: '彩金余额',
            icon: infoIcon2,
            price: '0.00'
          },


        ],
				tabs: [
				  {
				    title: "存款",
				  },
				  {
				    title: "取款",
				  },
				],
				defaultIndex: 0,
        wallteData:{}

			}
		},
		methods: {
			tabClick(e) {
				this.defaultIndex = e
				// console.log(e,'e')
			},
      submitConfirm(){
        $H.post('/app_user_save_wallet_status',{id:this.wallteData.reason_id}).then((res) => {

        })
        this.$refs.noticePopup.close();
      },
      getWalletData() {
        $H.post('/app_user_wallet_data').then((res) => {
          console.log(res)
          if (res.code == 200) {
            this.wallteData = res.data
            if(this.wallteData?.reason){
              this.$refs.noticePopup.open('center')
            }
          } else {
            return uni.showToast({
              title: res.msg,
              duration: 1000,
              icon: 'none'
            });
          }
        })
      },
      getDayData() {
        $H.post('/app_user_my_data').then((res) => {
          console.log(res)
          if (res.code == 200) {
            // this.money = res.data.money
            this.infoList[0].price = res.data.total_money || 0.00
            //this.infoList[2].price = res.data.today_yinkui || 0.00
            this.infoList1[0].title = res.data.ls_title
            this.infoList1[0].price = res.data.today_money || 0.00

            // this.voucher = res.data.voucher
            // this.nickname = res.data.nickname
          } else {
            return uni.showToast({
              title: res.msg,
              duration: 1000,
              icon: 'none'
            });
          }
        })
      },
			getMoney() {
				$H.post('/app_user_money').then((res) => {
					console.log(res)
					if (res.code == 200) {
						// this.money = res.data.money
						this.infoList[1].price = res.data.money || 0.00
            this.infoList[2].price = res.data.voucher || 0.00
            this.infoList1[1].price = res.data.points || 0.00
						// this.nickname = res.data.nickname
					} else {
						return uni.showToast({
							title: res.msg,
							duration: 1000,
							icon: 'none'
						});
					}
				})
			},
      getConfig() {
        $H.post('/app_user_get_config').then((res) => {
          if (res.code == 200) {
            this.Config = res.data
            if(this.Config.points_open == 0) {
              this.infoList1.splice(1, 1);
            }
          }else{
            return uni.showToast({
              title: res.msg,
              duration: 1000,
              icon: 'none'
            });
          }
        }).catch((err) => {
          console.log(err)
        })
      }
		},
		onShow() {
			this.getMoney()
      this.getDayData();
      this.getWalletData();
      this.getConfig()

			this.userInfo = uni.getStorageSync('UserInfo');
			// this.infoList[0].price = this.userInfo.money || 0.00
		}
	}
</script>

<style scoped lang="scss">
body {
  background-color: #f0f3ff !important;
  color: #535d76;
  line-height: 1.6;
  font-size: 3.46667vw;
}

uni-page-body {
  background-color: transparent;
}

.w-bj-cont {
  background-color: #f2f2ff !important;
}

.w-row-center {
  color: #333 !important;
}

.content-box{
  .van-divider {
    display: flex;
    align-items: center;
    margin:4.26667vw 0;
    color: #969799;
    font-size: 3.73333vw;
    line-height: 6.4vw;
    border-color: #ebedf0;
    border-style: solid;
    border-width: 0;
    &:before{
      content: "";
      display: block;
      flex: 1;
      box-sizing: border-box;
      height: 1px;
      border-color: inherit;
      border-style: inherit;
      border-width: 1px 0 0;
    }
  }
  .van-grid-item__content--center {
    align-items: center;
    justify-content: center;
  }

  .van-grid-item__content {
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    height: 100%;
    padding: 4.26667vw 2.13333vw;
    background: #fff;
    .info-icon{
      width: 44rpx;
    }
  }
  .margin-bottom-0 {
    margin-bottom: 0 !important;
  }

  ::v-deep .van-tabs__wrap{
    background-color: #fff;
    ._item{
      justify-content: center !important;
      text-align: center !important;
    }
  }
}


</style>